<template>
    <div>
        <common-header></common-header>

        <div style="width:1200px; margin: 50px auto;">
            <div class="row">
                <div class="col-md-3">
                    <!-- 账号安全侧栏 -->
                    <safe-nav :activeId="activeId"></safe-nav>
                </div>
                <div class="col-md-9">
                    <el-card class="accountCard" shadow="always">
                        <div class="titleWrap">
                            <div>我的订单</div>
                        </div>
                        <el-tabs v-model="orderActiveName"   >
                            <el-tab-pane label="全部订单" name="first" >
                                <div class="orderCard " >
                                    <el-card shadow="always">
                                        <div class="myTitle" >
                                                <div class="orderTitle" style="width:180px;" v-for="(item,index) in orderTitle" :key="index">
                                                    <span>{{item.title}}</span>
                                                </div>
                                            </div>
                                    </el-card>
                                
                                    <el-card class="myELCard" shadow="always" v-for="item in orderList" :key="item.id" >
                                        <div class="myCard" >
                                            <div class="orderInfo" style="width:150px" >
                                                <span>{{item.orderNumber}}</span>
                                            </div>
                                            <div class="orderInfo" style="width:150px" >
                                                <span>￥{{item.payment}}</span>
                                            </div>
                                            <div class="orderInfo" style="width:150px" >
                                                <span>{{item.myTime}}</span>
                                            </div>
                                            <div class="orderInfo" style="width:120px">
                                                <el-button type="success" size="mini" @click="getOrderDetail(item.id)">详 细</el-button>
                                                <el-button type="danger" size="mini" @click="delOrder(item.id)">删 除</el-button>
                                            </div>

                                        </div>
                                    </el-card>
                                </div>
                            </el-tab-pane>  
                            <el-tab-pane label="已支付" name="second" >
                                <div class="orderCard " >
                                    <el-card shadow="always">
                                        <div class="myTitle" >
                                                <div class="orderTitle" style="width:180px;" v-for="(item,index) in orderTitle" :key="index">
                                                    <span>{{item.title}}</span>
                                                </div>
                                            </div>
                                    </el-card>
                                
                                    <el-card class="myELCard" shadow="always" v-for="item in orderList.filter(item => item.status == 2)" :key="item.id" >
                                        <div class="myCard" >
                                            <div class="orderInfo" style="width:150px" >
                                                <span>{{item.orderNumber}}</span>
                                            </div>
                                            <div class="orderInfo" style="width:150px" >
                                                <span>￥{{item.payment}}</span>
                                            </div>
                                            <div class="orderInfo" style="width:150px" >
                                                <span>{{item.myTime}}</span>
                                            </div>
                                            <div class="orderInfo" style="width:120px">
                                                <el-button type="success" size="mini" @click="getOrderDetail(item.id)">详 细</el-button>
                                                <el-button type="danger" size="mini" @click="delOrder(item.id)">删 除</el-button>
                                            </div>

                                        </div>
                                    </el-card>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="未支付" name="thirt" >
                                <div class="orderCard " >
                                    <el-card shadow="always">
                                        <div class="myTitle" >
                                                <div class="orderTitle" style="width:180px;" v-for="(item,index) in orderTitle" :key="index">
                                                    <span>{{item.title}}</span>
                                                </div>
                                            </div>
                                    </el-card>
                                
                                    <el-card class="myELCard" shadow="always" v-for="item in orderList.filter(item => item.status == 1)" :key="item.id" >
                                        <div class="myCard" >
                                            <div class="orderInfo" style="width:150px" >
                                                <span>{{item.orderNumber}}</span>
                                            </div>
                                            <div class="orderInfo" style="width:150px" >
                                                <span>￥{{item.payment}}</span>
                                            </div>
                                            <div class="orderInfo" style="width:150px" >
                                                <span>{{item.myTime}}</span>
                                            </div>
                                            <div class="orderInfo" style="width:120px">
                                                <el-button type="success" size="mini" @click="getOrderDetail(item.id)">详 细</el-button>
                                                <el-button type="danger" size="mini" @click="delOrder(item.id)">删 除</el-button>
                                            </div>

                                        </div>
                                    </el-card>
                                </div>
                            </el-tab-pane>                         
                        </el-tabs>
                                
                        
                    </el-card>
                    <div style="color: rgb(152, 152, 152);margin:10px 0 0 20px;font-size:12px;">
                        * 我们确保你所提供的信息均处于严格保密状态，不会泄露
                    </div>
                </div>
            </div>


            <!-- 订单详细dialog区域 -->
            <el-dialog
                title="订单详细"
                :visible.sync="dialogVisible"
                width="55%">
                <div>
                    <!-- {{orderDetails}} -->
                            <el-card class="mycard" v-for="item in orderDetails" :key="item.id" >
                                <div class="card-content" >
                                    <div class="item-img">
                                        <img :src="imgBaseUrl+item.productImage" alt="">
                                    </div>
                                    <div class="card-body" >
                                        <div class="item-name">
                                            <span >{{item.productName}}</span>
                                            <!-- <p>类别： <span class="item-cate">{{item.categoryName}}</span></p>
                                            <p class="item-status">库存：{{item.stock}}</p> -->
                                        </div>
                                        <div class="item-quantity">
                                            <span style="margin-right:15px;">数量：{{item.quantity}}</span>
                                            <span>单价：{{item.currentUnitPrice}}</span>
                                        </div>
                                        <div class="item-cost">
                                            <span class="price">总金额：<span style="color:red;">￥{{item.totalPrice}}</span></span>
                                            <div class="shop">
                                                <i class="el-icon-shopping-cart-2"></i>
                                                <span> Free Shipping</span>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                            </el-card>
                </div>
            </el-dialog>

        </div>

        <common-footer></common-footer>
    </div>
</template>

<script>
import CommonHeader from '../../components/Show/CommonHeader'
import CommonFooter from '../../components/Show/CommonFooter'
import SafeNav from '../../components/Safe/SafeNav'
export default {
    components:{
        CommonHeader,
        CommonFooter,
        SafeNav
    },
    data() {
      return {
        orderActiveName: 'first',
        activeId: 3,
        activeName: '1',

        dialogVisible: false,    // 订单详细dialog区域

        
        // 标题名字
        orderTitle: [
            {
                title: '商品订单号'
            },
            {
                title: '总价格'
            },
            {
                title: '下单时间'
            },
            {
                title: '操作'
            }
        ],
        // 订单列表
        orderList: [],

        orderDetails: [],

        // 图片服务器地址
        imgBaseUrl: 'https://phone-shop.oss-cn-beijing.aliyuncs.com/',
      
      };
    },

    methods: {
        filterTag(value, row) {
            return row.tag === value;
        },
        // 获取订单页
        async getOrderList() {
            var query={
                pageNum: 1,
                pageSize: 50,
                userId: JSON.parse(window.sessionStorage.getItem('userInfo')).id
            }
            const { data: res } = await this.$http.get('/order/search', {params: query})
            console.log('订单详细', res)
            if(res.code == 200){
                this.orderList = res.data.list.map((item)=>{
                    item.myTime = this.timeStamp2String(item.createTime)
                    return item
                })

                this.orderList = this.orderList.filter(item=>item.deleted !== 1)
            }
            
        },
        // 删除订单
        async delOrder(id){
            // console.log('订单id:', id)
            const {data:res} = await this.$http.get(`/order/delete?id=${id}`)
            console.log('删除订单:', res)
            if(res.code === 200){
                this.getOrderList()
                this.$message.success('删除成功！')
            }
        },
        // 获取订单详细
        async getOrderDetail(id){
            console.log('订单id:', id)
            const {data:res} = await this.$http.get(`/order/search/orderDetail/${id}`)
            console.log('订单详细', res)
            if(res.code === 200){
                this.orderDetails = res.data.orderItemList
            }
            if(this.orderDetails.length>0){
                this.dialogVisible = true // 显示dialog
            }else{
                return this.$message.warning('没有详细数据')
            }

        },
        // 时间转换
        timeStamp2String(time) {
            var dateee = time
            // console.log(dateee);
            var date = new Date(+new Date(dateee) + 16 * 3600 * 1000)
                .toISOString()
                .replace(/T/g, " ")
                .replace(/\.[\d]{3}Z/, "");
            return date
        }
    },
    created(){
        this.getOrderList()
    },
}
</script>

<style lang="scss" scoped>
.accountCard{
    min-height: 420px;
    padding: 10px 30px;
    position: relative;
    .titleWrap{
        display: flex;
        justify-content: space-between;
    }
    .orderCard{
        // box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        .el-card{z-index: 1;margin-bottom: 15px;}
        /deep/.el-card__body{padding:0;}
        .myCard:hover{transform:translate(0, 10px);box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2);}
        .myCard{
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            transition: all .7s;
            // border: 1px solid red;
            .orderInfo{
                // border-right: 1px solid rgba(0,0,0,0.2);
                height: 124px;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                flex-flow: row;
            }
            .myImg{
                width: 218px;
                height: 120px;
                overflow: hidden;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                img{
                    width: 180px;
                    height: inherit;
                    text-align: center;
                    object-fit:contain;
                    // border: 1px solid purple;
                }
            }
        }
    }
    .myTitle{
        
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        height: 100%;
            .orderTitle{
                padding: 0;
                height: 72px;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
            }
    }
    
}

.mycard{
    transition: all 0.5s;
    margin-bottom: 2rem;
    // box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1);
}

.mycard:hover{
    transform:translate(0,-10px);
    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2);
}
.card-content{
    display: grid;
    grid-template-columns: 1fr 2fr;
    // height: 200px;
    .item-img{
        padding: 1rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 240px;
        // border:1px solid red;
        img{
            padding: 1rem 0;
            height: inherit;
            width: 100%;
        }
    }
    .card-body{
        padding: 1rem;
        padding-top: 50px;
        .item-name{
            font-size: 0.85rem;
            font-weight: 600;
            color: #2C2C2C;
            margin-bottom: 15px;
            p{
                margin: 5px 0px;
                font-size: 0.8rem;
            }
            .item-cate{
                color: #7367F0;
            }
            .item-status{
                color: #28C76F;
                font-weight: 400;
                font-size: 0.75rem;
            }
        }
        .item-quantity{
            p{
                font-weight: 700;
                font-size: 0.875rem;
            }
        }
        .item-bottom{
            font-size: 0.8rem;
            font-weight: 600;
            line-height: 10px;
            .deliver{
                color: #B8C2CC;
                margin-top: 1.8rem;
            }
            .offer{
                color: #28C76F;
            }
        }
    }
    
        
    
}
.item-cost{
    margin-top: 20px;
            .price{
                font-weight: 700;
            }
            .shop{
                margin-top: 0.5rem;
                margin-bottom: 1rem;
                font-size: 0.8rem;
                color: #B8C2CC;
                i{
                    font-size: 1rem;
                    font-weight: bold;
                }
            }
        }
</style>